<template>
  <div class="logins-box">
    <div class="bgimgbox wow slideInLeft" data-wow-iteration="1s">
      <img class="bgimg" src="../assets/img/background/keji-5.jpg" alt="">
      <!-- <img class="bgimg" src="../assets/img/bg/logins-bg.gif" alt=""> -->
    </div>
    <div class="login-container">
      <!-- <img class="logo" src="../assets/img/logo.png" alt=""> -->
      <h2 class="dsds-title wow fadeInDownBig" data-wow-delay="0.3s" data-wow-iteration="1s">
        <!-- 鼎盛医疗官网 -->
        <span>鼎盛医疗</span>
        <span @dblclick="password = ''">官</span>
        <span @dblclick="password = 'dsds220330'">网</span>
      </h2>
      <div class="inp-btn-box wow fadeInUp" data-wow-delay="0.3s" data-wow-iteration="1s">
        <input v-model="password" type="text" placeholder="请输入密码" @keydown.enter="login" />
        <button @click="login">进入</button>
      </div>
      <p v-if="error" class="error">{{ error }}</p>
    </div>
    <!-- <div class="in-password" @dblclick="password = 'dsds220330#'"></div> -->
  </div>
</template>

<script setup>
import WOW from 'wow.js'
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const password = ref('');
const error = ref('');
const CORRECT_PASSWORD = 'dsds220330';  // 预设密码

const login = () => {
  if (password.value === CORRECT_PASSWORD) {
    const now = new Date().getTime();
    // localStorage.setItem('login_expiry', now + 24 * 60 * 60 * 1000);  // 存储1天
    localStorage.setItem('login_expiry', now + 12 * 60 * 60 * 1000);  // 存储半天
    router.push('/home'); // 跳转到主页
  } else {
    error.value = '密码错误，请重试';
  }
};

const checkLoginStatus = () => {
  const expiry = localStorage.getItem('login_expiry');
  console.log(expiry, 'expiry==');

  if (expiry || Date.now() < Number(expiry)) {
    router.push('/home');
  }
};

onMounted(() => {
  checkLoginStatus(); // 先检查登录状态
  new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 100,
    mobile: true,
    live: true
  }).init()
})
</script>

<style lang="less" scoped>
.logins-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(15, 9, 37);
  // background-color: rgba(37, 29, 73, 0.2);
  z-index: 9999999999;
  overflow: hidden;

  transition: all .3s;

  .logo {
    width: 20vw;
    height: 20vw;
  }

  .dsds-title span {
    font-size: 36px;
    font-weight: 600;
    user-select: none;
  }

  .bgimgbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;


    .bgimg {
      width: 100%;
      height: 100%;
    }
  }

  .login-container {
    text-align: center;
    padding: 50px 12px;
    transform: translateY(-16vh);
  }

  h2 {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 32px;
    color: #fff;
  }


  .inp-btn-box {
    display: flex;
  }

  input {
    // padding: 8px;
    // margin: 10px 0;

    // width: 512px;
    height: 16px;
    padding: 12px 16px;
    font-size: 16px;
    margin: 0;
    vertical-align: top;
    outline: 0;
    box-shadow: none;
    border-radius: 10px 0 0 10px;
    border: 2px solid #c4c7ce;
    border-right: none;
    background: #fff;
    color: #222;
    overflow: hidden;
    box-sizing: content-box;
    -webkit-tap-highlight-color: transparent;
  }

  button {
    // cursor: pointer;

    cursor: pointer;
    // width: 108px;
    height: 44px;
    line-height: 45px;
    padding: 0 24px;
    // padding: 0;
    background: 0 0;
    background-color: #4e6ef2;
    border-radius: 0 10px 10px 0;
    font-size: 17px;
    color: #fff;
    box-shadow: none;
    font-weight: 400;
    border: none;
    outline: 0;
  }

  .error {
    margin-top: 8px;
    color: red;
  }

  .in-password {
    position: absolute;
    bottom: 10px;
    right: 10px;

    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 2;
  }
}

@media (max-width: 1024px) {
  .bgimg {
    width: auto !important;
    height: 100%;
  }
}
</style>
